<template>
	<div>
		
		当前位置/排行榜/<span class="cl-gold">球员详情</span>
		<div class="player-car">

			<div class="carImg">
				
				<img  :src="playerData.teamIcon||initImg" alt="" />
				
			</div>

			<img width="150" height="150" :src="playerData.playerIcon||initImg" class="radius50" />
			<div class="fromInfo">
				<div>球员姓名&nbsp:&nbsp&nbsp<span class="cl-white">{{playerData.studentName}}</span></div>
				<div>所属站位&nbsp:&nbsp&nbsp<span class="cl-white">{{playerData.position}}</span></div>
				<div>球队球衣&nbsp:&nbsp&nbsp<span class="cl-white">{{playerData.cloth}}</span></div>
				<div>所属球队&nbsp:&nbsp&nbsp<span class="cl-white">{{playerData.teamName}}</span></div>
				<div>所属学校&nbsp:&nbsp&nbsp<span class="cl-white">{{playerData.schoolName}}</span></div>
			</div>
			<i class="slicer"></i>
			<div><h2>{{playerData.appearances}}</h2>出场次数</div>
			<div><h2>{{playerData.playingTime|initTime}}</h2>出场时间</div>
			<div><h2>{{playerData.goals}}</h2>进球</div>
			<div><h2>{{playerData.redCard}}</h2>红牌</div>
			<div><h2>{{playerData.yellowCard}}</h2>黄牌</div>
			
		</div>
		<h3 class="column-heading">参赛信息</h3>
	
	<el-row class="th">
		  <el-col :span="1" type='flex' justify="center">序号</el-col>
		  <el-col :span="5">比赛日期</el-col>
		  <el-col :span="9">比赛球队</el-col>
		  <el-col :span="2">出场时长</el-col>
		  <el-col :span="2"><div >进球</div></el-col>
		  <el-col :span="2"><div >黄牌</div></el-col>
		  <el-col :span="2"><div >红牌</div></el-col>
		  <el-col :span="1">&nbsp</el-col>
	</el-row>
	<!--球员的均场比赛数据-->
   <div  v-for="(item,i) in playerData.gameRecords" >	 
  	 <div class="border-1px"  @click="changeCanvas(item);liIndex= liIndex==i?999:i">
  	 	<el-row :class="{'el-rowBox':i%2!=0}">
		  <el-col :span="1" type='flex' justify="center">{{i+1}}</el-col>
		  <el-col :span="5"><div>{{(item.startTime||'999')|initDate}}</div></el-col>
		  <el-col :span="9">
		  	<div>
			  	<img width="32" :src="item.redTeamIcon||initImg" alt="" />
				{{item.redTeamName}}   
				<span class="score">
					<b>{{item.redScore}}  :  {{item.blueScore}}</b> 
				</span>        
				<img width="32" :src="item.blueTeamIcon||initImg" alt="" />
				 {{item.blueTeamName}}
		  	</div>
		  </el-col>
		  <el-col :span="2"><div >{{(item.playingTime)|initTime}}</div></el-col>
		  <el-col :span="2"><div >{{item.moving.goal}}</div></el-col>
		  <el-col :span="2"><div >{{item.moving.redCard}}</div></el-col>
		  <el-col :span="2"><div >{{item.moving.yellowCard}}</div></el-col>
		  <el-col :span="1"><div class="grid-content "><img :class="{'rotate90':liIndex==i}" src="../assets/ic_enter.png"/></div></el-col>
		</el-row>
  	 	
	 </div>
	 <transition name='fade'>
	 	<div v-if="playerData.gameRecords.length>0" v-show="liIndex==i" >
    	
	 	  <div  class="cycleCar">
	 		<div class="w60 relative">
	 			
		 				<div class="bg-white   ">
			 				<div class="f4"  	ref='cvOne'>1</div>
			 				<div class="cycleText c1"><h4>{{(item.moving.distance||0)|toFixed}}m</h4>跑动距离 </div>
			 				<div class="f4" 	ref='cvTwo'>2</div>
			 				<div class="cycleText c2"><h4>{{(item.moving.sprintingDistance||0)|toFixed}}m</h4>冲刺距离 </div>
			 				<div class="f4"  	ref='cvThere'>3</div>
			 				<div class="cycleText c3"><h4>{{(item.moving.avgSpeed||0)|toFixed}}m/s</h4>平均速度 </div>
			 				<div class="f4"     ref='cvFour'>4</div>
			 				<div class="cycleText c4"><h4>{{(item.moving.maxRunspeed||0)|toFixed}}m/s</h4>最高速度 </div>
			 				
		 				</div>
			 			<div class="w90 grey "></div>
			 			
			 			
			 			<div class="bg-white ">
							<div class="passRate ">
		 						<div class="f5" ref='cvFive'>5</div>
		 						<div class=" c5"><h4>{{(passRate.start||0)}}%</h4>传球成功率</div>
		 					</div>
			 				<div class="left">
			 					<div class="before-time">
			 						前场时长:
			 						<span class="bg-mark">
			 							<span 
		 									:style="{'width':(item.moving.midfieldDuration==0?0:item.moving.midfieldDuration/(playerData.maxMoving.midfieldDuration) ).toFixed(2)*100+'%','height':'100%'} " 
			 								class="absolute bg-blue-line"></span>
			 						</span>
			 						<span>{{item.moving.frontDuration|initTime}}</span>
			 					</div>
		 						<div class="between-time">
		 							中场时长:
		 							<span class="bg-mark">
		 								<span 
		 									:style="{'width':(item.moving.midfieldDuration==0?0:item.moving.midfieldDuration/(playerData.maxMoving.midfieldDuration) ).toFixed(2)*100+'%','height':'100%'} " 
		 									class="absolute bg-blue-line"></span>
		 							</span>
		 							<span>{{item.moving.midfieldDuration|initTime}}</span>
		 						</div>
		 						<div class="afert-time">
		 							后场时长:
		 							<span class="bg-mark">
		 								<span 
		 									:style="{'width':(item.moving.backDuration==0?0:item.moving.backDuration/(playerData.maxMoving.backDuration) ).toFixed(2)*100+'%','height':'100%'} " 
		 									class="absolute bg-blue-line"></span>
		 							</span>
		 							<span>{{item.moving.backDuration|initTime}}</span>
		 						</div>
			 				</div>	
		 					
		 					

			 			</div>
			 		
		 			
	 			
	 		</div>
	 		
	 		<div class="padding20 hotMap" id="hotMap">
	 			<!--<img width="440" height="276" src="../assets/qiuchang.png" alt="" />-->
	 			<img width="440" height="276" src="../assets/hot_bg.jpg" alt="" />
	 		
	 		</div>
	 	  </div>
	 	  <div v-show="lineChart==1" class="grey-box">
	 			<div class="line-chart">
	 				每三分钟跑动趋势图
	 				<div class="chartInfo">
	 					
	 				</div>
	 			</div>
	
	 	  </div>
	 		
    	</div>
    	
    	
	 </transition>

   
						
</div> 	
				
		
	</div>
</template>

<script>
	import Heatmap from 'heatmap.js'
   
	export default {
		name:'PlayerDetails',
		props:['comId'],
		data(){
			return {
				hotMap_data:{
					max_x: 200,
	    			max_y: 400,
	   				max_value: 10,
	  				points:[  
				       {x: 165,  y: 100, value: 6},
				       {x: 140,  y: 100, value: 9},
				       {x: 150,  y: 100, value: 4}, 
				    ]	
				},
				liIndex:999,
				userId:this.$route.params.id,
				playerData:{
					"appearances":1,
					"cloth":"",
					"gameRecords":[
						{
							"blueScore":0,
							"blueTeamIcon":"",
							"blueTeamName":"",
							"playingTime":32132,
							"redScore":0,
							"redTeamIcon":"",
							"redTeamName":"",
							"runDatas":null,
							"startTiem":"",
							"moving":{
								"avgSpeed":0,
								"backDuration":1110,
								"distance":3302,
								"frontDuration":0,
								"goal":3,
								"maxSpeed":0,
								"midfieldDuration":0,
								"passRate":0,
								"possession":0,
								"redCard":0,
								"runDatas":null,
								"sprintingDistance":2490,
								"sprintingDuration":186,
								"yellowCard":0
							}
						}
					],
					"maxMoving":{
						"avgSpeed":1.0,
						"backDuration":1644,
						"distance":349234,
						"frontDuration":366,
						"goal":3,
						"maxSpeed":7.5,
						"midfieldDuration":2169.25,
						"passRate":0.76,
						"possession":0.00,
						"redCard":0,
						"runDatas":null,
						"sprintingDistance":79518,
						"sprintingDuration":null,
						"yellowCard":0
					},
					"goals":9,
					"playerIcon":"",
					"playingTime":21212,
					"position":"",
					"redCard":0,
					"schoolName":"",
					"studentName":"初始数据",
					"teamIcon":"",
					"teamName":"初始数据",
					"userId":"",
					"yellowCard":0
				},
			  
			   run :{
			        width: "100",//圆环水平直径
			        height: "100",//圆环垂直直径
			        lineCap:'round',//内圈进度条是否圆角,不填即为否
			        start: "0",//初始进度值
			        end: "80",//动态调用sport 时 start增长到end 即停下
			        interval: "20",//动态调用sport 时 的 绘制一次的间隔
			        intext:" ",//环圈中心文本信息,默认0 此处设置为 空格
			        unit: "",//环圈中心文本信息后缀单位
			        change: 2,//进度单次增长幅度
			        border: "7",//圆环宽度
			        bgColor: "#E5E5E5",//背景色
			        barColor: "#01BBD4",//进度背景色
			        textColor: "black"//文字信息颜色
			   },
			   sprint:{
			   	 	width: "100",
			        height: "100",
			        lineCap:'round',
			        start: "0",
			        end: "60",
			        interval: "20",
			        intext:'  ',
			        unit: "",
			        change: 2,
			        border: "7",
			        bgColor: "#E5E5E5",
			        barColor: "#E13500",
			        textColor: "black"
			   },
			   average:{
			   	 	width: "100",
			        height: "100",
			        lineCap:'round',
			        start: "0",
			        end: "30",
			        interval: "20",
			        intext:" ",
			        unit: "",
			        change: 2,
			        border: "7",
			        bgColor: "#E5E5E5",
			        barColor: "#646464",
			        textColor: "black"
			   },
			   maxRunspeed:{
			   	 	width: "100",
			        height: "100",
			        lineCap:'round',
			        start: "0",
			        end: "100",
			        interval: "20",
			        intext:' ',
			        unit: "",
			        change: 2,
			        border: "7",
			        bgColor: "#E5E5E5",
			        barColor: "#01BBD4",
			        textColor: "black"
			   },
			   passRate:{
			   	 	width: "100",
			        height: "100",
			        lineCap:'round',
			        start: "0",
			        end: "100",
			        interval: "20",
			        intext:' ',
			        unit: "",
			        change: 2,
			        border: "7",
			        bgColor: "#E5E5E5",
			        barColor: "#01BBD4",
			        textColor: "red"
			   },
		
				lineChart:0,
				initMax:{
					distance:120000,//跑动距离
					sprintDistance:12000,//冲刺距离
					avgSpeed:16,//平均跑速
					maxRunspeed:20,//最高速度
					passRate:100//传球成功率
				}
			}
		},
		methods:{
			changeCanvas( data){
				this.run.start = (data.moving.distance/this.initMax.distance).toFixed(2)*100 
				this.sprint.start =( data.moving.sprintingDistance/this.initMax.sprintDistance).toFixed(2)*100 
				this.average.start = (data.moving.avgSpeed/this.initMax.avgSpeed).toFixed(2)*100 
				this.maxRunspeed.start = (data.moving.maxRunspeed/this.initMax.maxRunspeed).toFixed(2)*100 
				this.passRate.start = (data.moving.passRate/this.initMax.passRate).toFixed(2)*100 
			},
		 	sport:function(el,obj){
		 		//需要进度条动态增加效果使用此函数
		 		let _that = this;
            	let time = setInterval(function() {

                    if( obj.start-obj.end<obj.change||obj.end-obj.start<obj.change ) {
                    	obj.start=obj.end;
                        clearInterval(time);
                    }else if( obj.start <obj.end){
                   		obj.start= Number(obj.start)+Number(obj.change);
                    }else{
                    	obj.start= Number(obj.start)-Number(obj.change)
                    }
                 	_that.setOptions(el,obj);
                }.bind(obj), obj.interval);
            },
            setOptions: function(el,obj) {
//          	画出环形图
            	let canvas = window.document.createElement('canvas');    	
                var degree = obj.intext||obj.start;
     			if(el){
     				if(el[0].innerHTML){el[0].innerHTML=''}else{return false};
     				el[0].append(canvas);
     				
     			};

                var context = canvas.getContext('2d');
               
                context.clearRect(0, 0, obj.width, obj.height);
                //开始绘画
                context.beginPath();
                context.lineWidth = obj.border;
                context.strokeStyle = obj.bgColor;
                context.arc(obj.width / 2, obj.height / 2, (obj.width / 2 - obj.border / 2), 0, 2 * Math.PI);
                context.lineCap = obj.lineCap;
               
               context.stroke();
                var deg = obj.start * 3.6 / 180 * Math.PI
                context.beginPath();
                context.lineWidth = obj.border;
                context.strokeStyle = obj.barColor;
                context.arc(obj.width / 2, obj.height / 2, (obj.width / 2 - obj.border / 2), 0 - Math.PI / 2, deg - Math.PI / 2);
                context.lineCap = obj.lineCap;
               
                context.stroke();
                context.beginPath();
                context.fillStyle = obj.textColor;
                context.font = "18px 微软雅黑";
                var text = degree + obj.unit;
                var textWidth = context.measureText(text).width;
                context.fillText(text, obj.width / 2 - textWidth / 2, obj.height / 2 + 9);
                context.lineCap = obj.lineCap; 
            },
            getPlayerData:function(){
            	
            	this.$axios.post(
            		'http://101.37.33.145:3100/weixin/getPlayerView.do',
            		{	
            			leagueId:this.comId,
            			userId:this.userId
            		}
            	).then(
            		res=>{this.playerData=res.data;this.initMax=red.data.maxMoving;}
            	).catch(
            		err=>console.log(err,'球员详情页请求失败')
            	)
            },
			hotMap:function(){
				var heatmapInstance =
				Heatmap.create({
				container: document.getElementById('hotMap')
				})
				// 构建一些随机数据点,网页切图价格这里替换成你的业务数据
				
				
				var max_value = this.hotMap_data.max_value;
				var max_x = this.hotMap_data.max_x;
				var max_y = this.hotMap_data.max_y;
				var points=this.hotMap_data.points;
				    points.forEach(item=>{
				    	item.x = item.x/max_x*400;
			            item.y= item.y/max_y*260
				    });
				var data = {
					max: max_value,
					data: points
				}
				// 因为data是一组数据,web切图报价所以直接setData
				heatmapInstance.setData(data)
			}	
		},
		mounted(){
			this.getPlayerData();
			
			
		},
		updated(){
			if(this.playerData.gameRecords.length>0){
				this.setOptions(this.$refs.cvOne,this.run);
				this.setOptions(this.$refs.cvTwo,this.sprint);
				this.setOptions(this.$refs.cvThere,this.average);
				this.setOptions(this.$refs.cvFour,this.maxRunspeed);
				this.setOptions(this.$refs.cvFive,this.passRate);
			};
			this.hotMap();
		},
		filters:{
			toFixed:function (value){
				return value.toFixed(1)
			}
		}
	}
	
	
</script>


<style scoped="scoped">
	.cycleText{
		position: absolute;
		top: 30px;
		width: calc((100% - 40px)/4 );
		padding-left:20px;
		box-sizing: border-box;
		text-align: center;
		font-size:14px ;
	}
	.f4{
		float: left;
		box-sizing: border-box;
		width: 25%;
		height: 150px;
		padding-left:40px ;
		margin-top: 16px;
	
	}
	.f5{
		float: left;
		box-sizing: border-box;
		width: 25%;
		height: 150px;
		
		margin-top: 16px;
	
	}
	.cycleText>h4{
		margin:10px;
	}
	.cycleTextc.c1{
		left: ;
	}
	.cycleText.c2{
		left: 25%;
		
	}
	.cycleText.c3{
		left: 50%;
	}
	.cycleText.c4{
		left: 75%;
	}
	.passRate{
		position: absolute;
		top:0 ;
		right:4%;
		text-align: center;
		width: 15% !important;
		height: 120px !important;

	}
	.passRate>.c5{
		position: absolute;
		left:14%;
		top:14%;
		font-size: 14px;
	}

	.el-rowBox{
		background-color: #F2F2F2;
	}
	.border-1px .el-col{
		box-sizing: border-box;
		text-align: center;
		line-height: 50px;
		font-size: 14px;
		border-bottom: 1px solid #D3DCE6;
	}
	.el-col{
		box-sizing: border-box;
		
		text-align: center;
	}
	.th>.el-col{
		box-sizing: border-box;
		
		
		line-height: 30px;
		font-size: 16px;
		font-weight: 600;
		color:white;
		background-color: #489DA2;
	}
	.cycleCar{
		display: flex;
		justify-content: space-around;
		width: 100%;
		padding: 20px;
		padding-right:0px ;
		box-sizing: border-box;
		background-color: #F7F7F7;
		
	}
	

	/*进场开始第一帧初始值*/
	.fade-enter-active{
		transition: all 1s;
		height: 0px;	
		overflow: hidden;
		
	}
	.fade-enter-to{
		transition: all 1s;
		height: 320px;	
		overflow: hidden;
		
	}
	.fade-leave-active{
		transition: all .5s;
		height: 320px;	
		overflow: hidden;
		
	}
	.fade-leave-to{
		transition: all .5s;
		height: 0px;	
		overflow: hidden;
		
	}
	
	

	
	table,tr,td,th{
		padding: 0;
		margin: 0;
	}
		
	img{
		vertical-align: middle;
	
	}
	.radius50{
		border-radius:50% ;	
	}
	li{
	
		list-style: none;
		padding: 0;
		margin: 0;
		
	}
	h2{
		margin-top: -6px;
		text-align: center;
		color: white;
		font-size: 22px;
	}
	
	
	.carImg{
		position: absolute;
		top: -80px;
		right:-80px ;
		width: 0;
		height: 0;
		border: 80px solid transparent;
		border-right: 80px solid #0E394A;
		transform: rotate(135deg);
	}
	.carImg>img{
		position: absolute;
		left: 26px;
		bottom: -20px;
		width: 40px;
		transform: rotate(-135deg);	
	}
	

	.slicer{
		width: 2px;
		height: 50px;
		background-color: #598892;
		box-shadow: #000000 1px 0px 1px 1px ;		
		
	}
	.player-car{
		position: relative;
		display: flex;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		padding:20px ;
		margin: 30px 0;
		box-sizing: border-box;
		color: #83BBC6;
		font-size: 14px;
		background: linear-gradient(to right,#0A202D 0%,#0F4456 100%);
	}
	.fromInfo>div{
		line-height: 36px;
	}
	

	
	
	.column-heading{
			position: relative;
			box-sizing: border-box;
			width: 100%;
			height: 42px;
			line-height: 42px;
			margin-bottom: 20px;
			margin-top: 30px;
			overflow: hidden;
			text-indent: 1em;
			font-weight: 400;
			font-size: 16px;
			border-bottom:5px solid #77c2c3;
			border-top-left-radius: 5px;
		}
		.column-heading:before{
			content: "";
			position: absolute;
			z-index:-1;
			top: 0px;
			left: -1em;
			width: 126px;
			height: 42px;
			background-color: #77C2C3;
			border-top-right-radius: 10px;
		}
		.column-heading:after{
			content: '';
			position:absolute ;
			top: 3.5px;
			left: calc(123px - 1em );
			border-left:35px solid  #77C2C3;
			border-top:38px solid transparent;
			/*border-right:34px solid aquamarine;*/
		}
		.justify-ad{
			display: flex;
			justify-content: space-around;
			
		}
		
		.border-1px{
			border-left: 1px solid #DCDCDC;
			border-right:  1px solid #DCDCDC;
		}
		.cl-white{
			color:white;

		}
		.bg-white{
			position: relative;
			background-color: white ;
			overflow: hidden;
			
		}
		.flex-ad{
			width: 100%;
			display: felx;
			justify-content: space-around;
		}
		
		
		
		.grey{
			background-color:#F7F7F7;

		}
		.w90{
			position: relative;
			/*z-index: 1;*/
			width: 90%;
			height:0px;
			margin: auto;
			margin-top: -20px;
			border: 1px dotted #E4E4E4;
			border-radius:5px ;
			
		}
		.w60{
			width: 60%;
		}
		
		.rotate90{
			transition: all .5s;
			transform: rotate(90deg);
		}
		.relative{
			position: relative;
			
		}	
		.absolute{
			position: absolute;
			top:0;
			left: 0;
		}
		
		.left{
			float: left;
			padding: 20px 30px;
			width:460px;
			
		}
		.left>div{
			display: flex;
			justify-content: space-around;
			line-height: 30px;
			font-size: 14px;
		}
		
		.bg-blue-line{
			background-color: #01AF96;
			border-radius: 12px;
		}
		.bg-mark{
			display: inline-block;
			position: relative;
			width: 300px;
			height: 10px;
			margin-top: 12px;
			background-color:#E4E4E4;
			border-radius:15px ;
			overflow: hidden;
		}
		.padding20{
			box-sizing: border-box;
			padding:0 20px;
		}
	
	.before-time{
		text-align: left;
	}
	.grey-box{
		box-sizing: border-box;
		width: 100%;
		
		padding:0px 20px;
		padding-bottom:20px ;
		background-color:#F7F7F7 ;
	}
	.line-chart{
		width: 100%;
		height: 400px;
		background-color: white;
	}
	.hotMap{
		
		box-sizing: border-box;
		width:400px;
		height:260px;
		margin:12px 40px 0 30px;
		background:rgba(0,0,0,0);
	
	}
	#hotMap>img{
		position: relative;
		left: -40px;
		top:-10px;
		
	}
</style>